<script setup lang="ts">
  import { InputConfig } from '../../../hooks/types'
  import CustomInput from '../../component-list/CustomInput.vue'
  import CustomSingleSelect from '../../component-list/CustomSingleSelect.vue'

  defineOptions({
    name: 'OrderCustomFormInputSetting',
  })

  const emits = defineEmits<{
    (e: 'change'): void
  }>()

  // 绑定的值
  const value = defineModel<InputConfig>('modelValue', { required: true })
</script>

<template>
  <div class="order-custom-form-input-setting">
    <div class="setting-item component-placeholder">
      <div class="label">占位文本</div>
      <div class="value">
        <custom-input
          v-model="value.placeholder"
          placeholder="请输入新的占位文本"
          @input="emits('change')"
        />
      </div>
    </div>

    <div class="setting-item">
      <div class="label">格式</div>
      <div class="value">
        <custom-single-select
          v-model="value.mode"
          :options="[
            { label: '文本', value: 1 },
            { label: '纯数字', value: 2 },
            { label: '金额', value: 3 },
          ]"
          @change="emits('change')"
        />
      </div>
    </div>

    <div v-if="value.mode === 2" class="setting-item number-max">
      <div class="label">最大值</div>
      <div class="value">
        <custom-input v-model="value.numberMax" :mode="2" @input="emits('change')" />
      </div>
    </div>

    <div v-if="value.mode === 3" class="setting-item amount-max">
      <div class="label">最大值</div>
      <div class="value">
        <custom-input v-model="value.amountMax" :mode="3" @input="emits('change')" />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .order-custom-form-input-setting {
    display: flex;
    flex-direction: column;
    row-gap: 16px;

    .setting-item {
      display: flex;
      flex-direction: column;
      row-gap: 4px;
    }
  }
</style>
